<template>
    <div class="index">
        <!-- 头部导航栏 -->
        <div class="header" style="background-color: white">
            <!-- 点击logo跳转首页 -->
            <img style="width:90px" @click="toPage('/userIndex')" src="../assets/image/logo.png" />
            <!-- 导航菜单 -->
            <div class="header1">
                <div @click="toPage('/userIndex')" class="menu-item">首页</div>
                <div @click="toPage('/userEquipment')" class="menu-item">滑雪设备</div>
                <div @click="toPage('/userTrack')" class="menu-item">滑雪赛道</div>
                <div @click="toPage('/userCoach')" class="menu-item">教练展示</div>
                <div @click="toPage('/userOwn')" class="menu-item">个人中心</div>
            </div>
            <!-- 右侧用户信息和退出登录 -->
            <div class="header2">
                <div class="header3">
                    <!-- 显示当前登录用户的名称 -->
                    {{ userStore.userInfo?.name }}
                </div>
                <div class="header4" @click="loginOut">退出登录</div>
            </div>
        </div>

        <!-- 首页Banner介绍区域 -->
        <div class="index1">
            <div class="index2">
                <div class="index3">
                    雪域天堂，激情无限，我们的滑雪场是您冬日的最佳去处‌‌。
                </div>
                <div class="index4">
                    Snowy paradise, infinite passion, our ski resort is your best destination for winter.
                </div>
                <!-- 热门话题推荐标题 -->
                <h2 class="index5">热门话题推荐</h2>
                <!-- 热门话题按钮 -->
                <div class="index5">
                    <div class="index6" @click="userEquipment">
                        <i class="el-icon-s-promotion"></i>滑雪设备
                    </div>
                    <div class="index6" style="margin-left:20px" @click="userTrack">
                        <i class="el-icon-s-promotion"></i>滑雪赛道
                    </div>
                    <div class="index6" style="margin-left:20px" @click="userCoach">
                        <i class="el-icon-s-promotion"></i>滑雪教练
                    </div>
                    <div class="index6" style="margin-left:20px" @click="userOwn">
                        <i class="el-icon-s-promotion"></i>个人中心
                    </div>
                </div>
            </div>
        </div>

        <!-- 公告栏区域 -->
        <div class="index7">
            <div class="index8">
                <div class="index9">
                    <div class="index10">
                        <div>公告栏</div>
                    </div>
                    <!-- 遍历公告列表渲染每条公告 -->
                    <div class="index11" v-for="(item, index) in noticeList" :key="index">
                        <div class="index12" style="margin-left: -280px">{{ index + 1 }}、</div>
                        <div class="index12">{{ item.title }}:</div>
                        <div class="index12">{{ item.content }}</div>
                        <div class="index12">{{ item.date }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图片展示区域，成对显示图片 -->
        <div class="index13" v-for="(pair, idx) in imagePairs" :key="idx">
            <div class="index10">
                <!-- 显示图片对 -->
                <img :src="pair[0]" class="show-img" />
                <img :src="pair[1]" class="show-img" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { useUserStore } from '@/stores/userStore'

// 使用Pinia管理的用户状态
const userStore = useUserStore()
// vue-router 实例，用于页面跳转
const router = useRouter()
// 公告列表数据，响应式
const noticeList = ref([])

// 预定义图片URL数组
const imgUrls = [
    'https://img0.baidu.com/it/u=1930870814,1701955143&fm=253&fmt=auto&app=120&f=JPEG?w=753&h=500',
    'https://dingyue.ws.126.net/2023/1210/a5f3975cj00s5foar02bqc003uw02kkg.jpg',
    'https://q6.itc.cn/q_70/images03/20250312/4a1e49b5014c43989c5a9375633737e6.jpeg',
    'https://img2.baidu.com/it/u=2297948675,2137226159&fm=253&fmt=auto&app=120&f=JPEG?w=1190&h=800'
]

// 计算属性，将图片数组按两张一组分组，方便成对显示
const imagePairs = computed(() => {
    const pairs = []
    for (let i = 0; i < imgUrls.length; i += 2) {
        pairs.push([imgUrls[i], imgUrls[i + 1]])
    }
    return pairs
})

// 通用页面跳转函数
function toPage(path) {
    router.push(path)
}

// 点击热门话题中的滑雪设备，跳转对应页面
function userEquipment() {
    toPage('/userEquipment')
}

// 点击滑雪赛道，跳转对应页面
function userTrack() {
    toPage('/userTrack')
}

// 点击滑雪教练，跳转对应页面
function userCoach() {
    toPage('/userCoach')
}

// 点击个人中心，跳转对应页面
function userOwn() {
    toPage('/userOwn')
}

// 退出登录，调用Pinia的logout，并跳转登录页
function loginOut() {
    userStore.logout(router)
}

// 页面加载完成后执行
onMounted(() => {
    // 从本地存储加载用户信息
    userStore.loadFromLocal()
    // 拉取公告列表数据
    axios.get('http://localhost:8181/notice/list').then(res => {
        noticeList.value = res.data
    })
})
</script>

<style scoped>
@import '../assets/css/header.css';
@import '../assets/css/index.css';

/* 图片展示样式 */
.show-img {
    height: 400px;
    border-radius: 10px;
    margin-top: 30px;
    margin-left: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
